import varibles from './Variables';

const customTheme = {
  colors: {
    white: '#ffffff',
    darktext: '#333333',
    uthinked: {
      primary: varibles.colors.uthinked['primary'],
      secondary: varibles.colors.uthinked['secondary'],
      light: varibles.colors.uthinked['light'],
      black: {
        disabled: varibles.colors.black['disabled'],
        second: varibles.colors.black['second'],
        content: varibles.colors.black['content'],
        title: varibles.colors.black['title'],
        light: varibles.colors.black['light'],
      },
    },
  },
  // 自定义组件
  components: {
    Button: {
      variants: {
        rounded: {
          bg: 'uthinked.primary',
          rounded: 'full',
          _text: {
            color: 'white',
          },
          _pressed: {
            // bg: 'uthinked.light',
            bg: '#1847d3',
          },
        },
        solid: {
          bg: 'uthinked.primary',
          _pressed: {
            // bg: 'uthinked.light',
            bg: '#1847d3',
          },
          _text: {
            color: 'white',
          },
        },
        primarys: {
          bg: '#fff',
          _pressed: {
            // bg: 'uthinked.light',
            bg: 'uthinked.primary',
            _text: {
              color: '#fff',
            }
          },
          _text: {
            color: 'uthinked.primary',
          },
          border: 1,
          borderColor: 'uthinked.primary'
        }
      },
      defaultProps: {
        variant: 'solid',
      },
    },
    Checkbox: {
      baseStyle: {
        _checkbox: {
          _checked: {
            borderColor: 'uthinked.primary',
            bg: 'uthinked.primary',
          },
        },
        _interactionBox: {
          _pressed: {
            bg: '#e4edff',
          },
        },
      },
    },
    Switch: {},
    Input: {
      baseStyle: {
        _ios: {
          _focus: {
            borderColor: 'uthinked.primary' 
          }
        }
      },
    },
    FormControlErrorMessage: {
      baseStyle: {
        _text: {
          fontSize: 14,
        },
      },
    },
    Progress: { 
      baseStyle: () => {
        return {
          innerBg:'uthinked.primary',
          bg: '#f7f7f7'
        }
      }
    }
  },
};
export default customTheme;
